@import "base.less";

#header {
    height: 1.3333rem;
    background-color: #1d6dff;

    .f1 {
        float: left;
        margin-top: .32rem;
        margin-left: .32rem;

        img {
            height: .6667rem;
        }
    }

    .fr {
        float: right;
        margin-top: .2667rem;
        margin-right: .32rem;

        img {
            height: .9067rem;
        }
    }
}


/* 搜索 */
#search {
    border-bottom: .0267rem solid #ccc;
    position: relative;

    .searchbox {
        margin: 0 auto;
        padding: .2667rem 5%;


        input {
            outline: none;
            height: .8rem;
            border: none;
            font-size: .4267rem;
            background-color: #f1f1f1;
            border-radius: .4rem;
            padding-left: .4rem;
            width: 90%;
        }
    }

    .btn {
        position: absolute;
        right: .2667rem;
        top: .2667rem;

        button {
            width: 1.68rem;
            height: .8rem;
            background: #1d6dff;
            border-radius: .4rem;
            font-size: .4267rem;
            color: #fff;
            border: none;
        }
    }
}

.subNav {
    background-image: linear-gradient(to bottom, #fff, #ccc);
    font-size: .3467rem;

    a {
        color: #333;
        text-decoration: none;
        display: inline-block;
        line-height: 1.0667rem;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    a:nth-of-type(1) {
        padding-left: .2667rem;
    }
}

.brandRanking {
    padding-left: .2667rem;
    width: 100%;
    border-top: .0267rem solid #cccccc;
    border-bottom: .0267rem solid #cccccc;
    background-color: #f4f4f4;
    margin-bottom: .2667rem;

    p {
        font-size: .3733rem;
        line-height: 1.0133rem;
        height: .8rem;
        margin-bottom: .2667rem;
    }
}

.main {
    margin-bottom: .5333rem;

    ul {
        li {
            font-size: .4267rem;

            .title {
                position: relative;

                span {
                    display: inline-block;
                    padding: .2667rem .4rem;
                }

                b {
                    position: absolute;
                    right: .4rem;
                    top: .2667rem;
                }
            }

            .container {
                text-align: center;
                overflow: hidden;
                display: none;

                .box {
                    font-size: .48rem;
                    color: black;
                    text-align: left;
                    width: 100%;
                    height: 2rem;
                    border-bottom: 1px solid #ccc;
                    padding-top: .2133rem;
                    padding-left: .4rem;

                    i {
                        float: left;
                        font-style: normal;
                        margin-right: .2667rem;
                        width: .6667rem;
                        height: .6667rem;
                        line-height: .6667rem;
                        text-align: center;
                        color: #ffffff;
                    }

                    i:nth-of-type(1) {
                        background-color: red;
                    }

                    .count {
                        font-size: .3733rem;
                        color: #999;
                        margin: .5333rem 0 .5333rem;
                    }
                }
            }
        }
    }
}


#footer {
    background-color: #f4f4f4;

    .more {
        padding: .2667rem 0;

        a {
            display: block;
            width: 90%;
            font: .32rem/.8rem "";
            margin-left: 5%;
            background-color: #f9f9f9;
            text-align: center;
            border: .0267rem solid #ddd;
            border-radius: .1333rem;
        }
    }

    .rank {
        position: relative;
        background-color: #1d6dff;
        height: .9333rem;
        padding-left: .2667rem;
        color: #fff;
        font: normal .5333rem/.9333rem "微软雅黑";
        margin: .2667rem .16rem 0 0;

        a {
            position: absolute;
            top: .2rem;
            right: .2rem;

            img {
                height: .5333rem;
            }
        }
    }

    .login {
        .row {
            display: flex;
            margin-top: .2667rem;

            a {
                flex: 1;
                border: .0267rem solid #c4c4c4;
                font: .3733rem/.88rem "";
                text-align: center;

                &:nth-child(2),
                &:nth-child(3) {
                    border-left: none;
                }
            }
        }

        .container {
            padding-top: .2667rem;
            font-size: .3467rem;

            p {
                text-align: center;
                padding-bottom: .2667rem;

                a {
                    font-size: .3467rem;
                    color: #666
                }
            }
        }
    }
}